<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header" :style="{backgroundColor:`rgba(250, 250, 250,${data.transparency})`}">
			<view class="" :style="{height: data.statusbarHeight+'px'}">
			</view>
			<view class="flex">
				<view class="round" @click="getback" :style="{backgroundColor:`rgba(231, 231, 231,${1-data.transparency})`}">
					<uni-icons size="26" type="arrowleft" />
				</view>
				<view class="nav">
					<view class="navitem" v-for="(item,index) in data.nav_list" @click="changNavId(item)" :style="{color:data.nav_id!=item.id ? `rgba(25, 25, 25,${data.transparency})` 
					: `rgba(241, 0, 0,${data.transparency})`  }">
						{{item.text}}
					</view>
				</view>
				<view class="round" @click="share" :style="{backgroundColor:`rgba(231, 231, 231,${1-data.transparency})`}">
					<uni-icons size="26" type="redo" />
				</view>
			</view>

		</view>

		<scroll-view scroll-y=true style="height: 100vh;" @scroll="scroll" :scroll-top="data.scrollTop"
			:scroll-into-view="data.scrollId" scroll-with-animation="true" v-show="data.goodsdetali.name">
			<!-- 商品 -->
			<view class="commodity" ref="commodity">
				<swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#FA301B" circular
					indicator-dots="true">
					<swiper-item v-if="data.goodsdetali.video">
						<video style="width: 100%;height: 100%;" :src="data.goodsdetali.video" controls></video>
					</swiper-item>
					<swiper-item v-for="(item,index) in data.list">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="bargaining">
					<view class="pricebox">
						<view class="">
							砍价享￥<text>{{$toFiexd(data.goodsdetali.price,2)}}</text>  原价￥{{$toFiexd(data.goodsdetali.market,2)}}
						</view>
					</view>
					<view class="timer">
						<view class="timertitle">
							砍价时间：
						</view>
						<view class="" style="">
							<!-- <uni-countdown :start="false" :show-day="false" :hour="data.duration[0]"
							 :minute="data.duration[1]"
								:second="data.duration[2]" color="#FFFFFF" background-color="#000"/> -->
								<text style="margin-right: 10upx; background-color:#000;color: #fff;padding: 1upx 4upx;text-align: center; border-radius: 5upx;">{{data.duration[0]<10?'0'+data.duration[0]:data.duration[0]}}</text>:
								<text style="margin-right: 10upx;background-color:#000;color: #fff;padding: 1upx 4upx;text-align: center; border-radius: 5upx;">{{data.duration[1]<10?'0'+data.duration[1]:data.duration[1]}}</text>:
								<text style="background-color:#000;color: #fff;padding: 1upx 4upx;text-align: center; border-radius: 5upx;">{{data.duration[2]<10?'0'+data.duration[2]:data.duration[2]}}</text>
						</view>
					</view>
				</view>
				<view class="commoditybox">
					<view class="price" v-if="false">
						￥{{$toFiexd(data.goodsdetali.price,2)}}
						<view class="prices">
							￥{{$toFiexd(data.goodsdetali.market,2)}}
						</view>
					</view>
					<view class="namebox">
						<!-- <view class="nbb">
							<view class="left">
								<text>赠送绿色积分：{{Number(data.goodsdetali.price)*4*Number(data.goodsdetali.discount)/100}}</text>
							</view>
							<view class="left">
								<text  v-show="false">正品</text>
								<text>{{data.goodsdetali.sales}}人参与砍价</text>
							</view>
						</view> -->
						<view class="name">
							{{data.goodsdetali.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="bargainingbox">
				<view class="titlebox">
					<view class="title">
						砍价玩法
					</view>
<!-- 					<view class="more"  @click.stop="$goURl('/pages/personal/agreement/agreement?code=3')">
						活动规则>
					</view> -->
				</view>
				<view class="list">
					<view class="item">
						<image src="https://pili-vod.guanxikeji.com/houdejia/img/1710492797167.png" mode=""></image>
						<view class="itemtitle">
							精选商品
						</view>
					</view>
					<view class="item">
						<image src="https://pili-vod.guanxikeji.com/tongdaguoji/img/1710492807973.png" mode=""></image>
						<view class="itemtitle">
							分享砍价
						</view>
					</view>
					<view class="item">
						<image src="https://pili-vod.guanxikeji.com/houdejia/img/1710492817204.png" mode=""></image>
						<view class="itemtitle">
							砍价成功
						</view>
					</view>
					<view class="item">
						<image src="https://pili-vod.guanxikeji.com/houdejia/img/1710492825628.png" mode=""></image>
						<view class="itemtitle">
							付款拿走
						</view>
					</view>
				</view>
			</view>
			<!-- 店铺 -->
			<view class="evaluate box" :id="'scrollView'+data.nav_list[0].id">
				<view class="title">
					店铺
				</view>
				<view class="business" >
					<view class="businessimage">
						<image :src="$store.state.logo" mode="">
						</image>
					</view>
					<view class="right">
						<view class="rbox">
							<view class="text1 textsl1">
								{{$store.state.name}}
							</view>
							<view class="text2">
								<uni-rate :disabled="true" disabledColor="#FFC41F" :value="5" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="recommend box" :id="'scrollView'+data.nav_list[1].id">
				<view class="title">
					评价 <text @click="$goURl('/pages/commodity/evaluate?id='+data.goodsdetali.ID)">查看更多（{{data.Comments.length}}条评价）
						></text>
				</view>

				<scroll-view :scroll-x="true">
					<view class="evaluate">
						<view class="evaluateitem" v-for="item in data.Comments">
							<view class="evaluatetop">
								<view class="imgs">
									<image :src="item.user.head?item.user.head:$defaultAvatar" mode=""></image>
								</view>
								<view class="info">
									<view class="infoname">
										{{item.user.nickname}}
									</view>
									<view class="xing">
										<view class="xings" v-for="(items,index) in item.star">
											<image src="http://pubuimg.cqguanjie.cn/icon/16995203564093.png" mode="aspectFill"></image>
										</view>
										<view class="xings" v-for="(items,index) in (5-item.star)">
											<image src="http://pubuimg.cqguanjie.cn/icon/16995203784662.png" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
							<view class="evaluatebottom">
								{{item.content}}
							</view>
						</view>
					</view>
				</scroll-view>
				<empty v-if="data.Comments.length==0"></empty>
			</view>
			<!-- 详情 -->
			<view class="details box" :id="'scrollView'+data.nav_list[2].id">
				<view class="title">
					商品详情
				</view>
				<view class="details" v-html="data.goodsdetali.details">
				</view>
			</view>
			<!-- 别删 -->
			<view class="" style="height:50px;"></view>
		</scroll-view>
		<!-- 底部 -->
		<view class="goodsnav">
			<uni-goods-nav :fill="true" :options="data.options" :buttonGroup="data.buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		<!-- 规格 -->
		<uni-popup ref="popup" @maskClick="close">
			<view class="popup-content">
				<view class="top">
					<uni-icons type="closeempty" size="22" @click="close"></uni-icons>
				</view>
				<view class="goodsdetail">
					<view class="goodsimg">
						<image :src="data.goods.img?data.goods.img:data.goodsdetali.img" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="price">
							￥{{$toFiexd(data.goods.price,2)}}
						</view>

						<view class="specifications">
							规格：<text v-for="item in data.listckecks">{{item+ ' '}}</text>
						</view>
						<view class="stock">
							库存：{{data.goods.stock}}
						</view>
					</view>
				</view>
				<view class="goodsdetail" style="justify-content: space-between;margin-top: 20upx;">
					<view class="stock">
						
					</view>
					<view class="stock">收货后获得积分：{{Number(data.goods.price)*4*Number(data.goodsdetali.discount)/100}}</view>
				</view>
<!-- 				<view class="numbox">
					<view class="">
						数量
					</view>
					<uni-number-box v-model="data.number" />
				</view> -->
				<view class="specsbox" v-for="(item,index) in data.lists">
					<view class="title">
						{{item.attr}}
					</view>
					<view class="specslist">
						<view class="specsitem" v-for="(items,indexs) in item.val" :class="{active:data.listckeck[index]==indexs}"
							@click="ckeck(index,indexs)">
							{{items}}
						</view>
					</view>
				</view>
				<view class="buy" @click="create">
					{{data.buttonGroup[data.isbutton].text}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		nextTick,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const {
		appContext
	} = getCurrentInstance();
	const data = reactive({
		duration:[],
		id:0,
		listckecks: [],
		list: [],
		lists: [], //规格
		listckeck: [],
		statusbarHeight: uni.getSystemInfoSync().statusBarHeight, //刘海屏高度
		scrollTop: 0, //设置竖向滚动条位置
		goodsdetali: {},
		goods: {},
		numberValue: 0,
		nav_list: [{
				id: 1,
				text: '店铺',
				scrollId: "scrollView1"
			},
			{
				id: 2,
				text: '评价',
				scrollId: "scrollView2"
			},
			{
				id: 3,
				text: '详情',
				scrollId: "scrollView3"
			}
		],
		options: [
		// 	{
		// 		icon: 'heart-filled',
		// 		text: '收藏',
		// 		infoBackgroundColor: '#007aff',
		// 		infoColor: "red",
		// 		iconColor:''
		// 	},
		// 	{
		// 	icon: 'shop',
		// 	text: '店铺',
		// 	infoBackgroundColor: '#007aff',
		// 	infoColor: "red"
		// },
		// {
		// 	icon: 'cart',
		// 	text: '购物车',
		// },
		],
		buttonGroup: [
			// {
			// 	text: '加入购物车',
			// 	backgroundColor: '#FA301B',
			// 	color: '#fff'
			// },
			{
				text: '立即砍价',
				backgroundColor: '#ffa200',
				color: '#fff'
			}
		],
		isbutton: 0,
		nav_id: null, //导航选中id
		scrollId: "",
		number: 1,
		transparency: 0, //透明度
		isDropDown: false, //下拉到临界点
		//临界值(图片高度-头部高度-刘海屏高度 250-50-刘海屏高度) 
		criticalValue: 200 - uni.getSystemInfoSync().statusBarHeight,
		selectlist: [],
		attribute: '',
		Comments: [], //商品评价
		Commentstotal: 0, //商品评价总数
	})
	const popup = ref()
	onLoad((option) => {
		data.id=Number(option.id)
		// addGoodsComments(Number(option.id)) //商品评价
		appContext.config.globalProperties.$request({
			url: `api/bargaining/goods_list_all/0/`,
			method: 'post',
			data: {
				id: Number(option.id),
			},
			success: (res) => {
				if(res.errno==0){
					try{
						data.list =appContext.config.globalProperties.$evalPro(res.data.img_list)// eval('(' + res.data.img_list + ')')
					}catch(e){
						
					}
					try{
						var difftime = res.data.duration*60;
						var days = parseInt(difftime/86400); // 天  24*60*60*1000 
						var hours = parseInt(difftime/3600)-24*days;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
						var minutes = parseInt(difftime%3600/60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
						var seconds = parseInt(difftime%60);  // 以60秒为一整份 取余 剩下秒数	
						data.duration=[hours,minutes,seconds]
					}catch(e){
						//TODO handle the exception
					}
					data.goodsdetali = res.data
					
					data.goodsdetali.details = res.data.details.replace(/\<img/gi, '<img style="max-width:100%;"');
					data.goodsdetali.details = data.goodsdetali.details.replace(/\<video/gi,
						'<video style="max-width:100%;"');
					data.lists = arr(res.data.attribute_list)
					if (!res.data.business.ID) {
						data.options = [
						// 	{
						// 	icon: 'heart-filled',
						// 	iconColor:'',
						// 	text: '收藏',
						// 	infoColor: ""
						// },
						// {
						// 	icon: 'cart',
						// 	text: '购物车',
						// },
						]
					}
					
					
					data.listckecks=res.data.attribute_list[0].attr.map(item=>{
						return item.val
					})
					data.goods = {
						img: res.data.attribute_list[0].img,
						price: res.data.attribute_list[0].price,
						stock: res.data.attribute_list[0].stock,
						// coupon: res.data.attribute_list[0].coupon,
						ID: res.data.attribute_list[0].ID,
						market:res.data.attribute_list[0].market,
						money: res.data.attribute_list[0].money,
						number:res.data.attribute_list[0].number,
						duration: res.data.attribute_list[0].duration,
					}
					data.listckeck=[]
					data.lists.forEach(item=>{
						data.listckeck.push(0)
					})
					
					if(res.data.favorites==1){
						data.options[0].iconColor='red'
					}
				}else{
					uni.navigateBack()
				}
				
			}
		})
	})
	onShow(() => {
		console.log('页面onShow')
	})
	function addGoodsComments(id) { //获取商品评价

		appContext.config.globalProperties.$request({
			url: `api/addGoodsComments/?id=${id}&page=1&size=10`,
			method: 'get',
			data: {
				id: id,
			},
			success: (res) => {
				data.Comments = res.data.data
				data.Commentstotal = res.data.total
			}
		})
	}
	function onClick (e) {
		if (e.content.text == '店铺') {
			appContext.config.globalProperties.$goURl('/pages/business/businessdetail?id=' + data.goodsdetali.business.ID)
		} else if(e.content.text == '收藏'){
			collect()
		}else{
			appContext.config.globalProperties.$goURl('/pages/cat/cat')
		}
	}
	const buttonClick = (e) => {
		data.isbutton = e.index
		popup.value.open('bottom')
	}
	
	// 点击收藏/取消收藏
	function collect() {
		appContext.config.globalProperties.$request({
			url: `api/favorites/`,
			method: 'POST',
			data: {
				goods_id: data.goodsdetali.ID,
				
			},
			success: (res) => {
				if (res.errno == 0) {
					if(res.errmsg=='取消收藏'){
						data.options[0].iconColor=''
					}else{
						data.options[0].iconColor='red'
					}
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
				}
			}
		})
	}
	function create(){ //创建订单
		if (data.goods.ID != 0) {
			// let attribute_list = [{
			// 	'price_id': data.goods.ID,
			// 	'number': data.number
			// }]
				appContext.config.globalProperties.$request({
					url: `api/bargaining/initiateBargaining/`,
					method: 'post',
					data: {
						'id': data.goods.ID,
						'goods_id':data.goodsdetali.ID
					},
					success: (res) => {
						if (res.errno == 0) {
							popup.value.close()
							uni.navigateTo({
								url:'/pages/commodity/bargaining/mylist'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.errmsg
							})
						}
					}
				})

		}
	}
	function ckeck(a, b){ //规格选择
		data.listckeck[a] = b
		let num = data.listckeck.filter(item => {
			return item >= 0
		}).length

		if (num == data.lists.length) {
			let attribute = ''
			data.listckeck.forEach((item, index) => {
				attribute = attribute + data.lists[index].id[item] + (index < data.lists.length - 1 ? '|' : '')
			})
			let listsss = []
			data.lists.forEach((item, index) => {
				listsss.push(item.val[data.listckeck[index]])
			})
			data.listckecks = listsss
			data.attribute = attribute
			data.goods = data.goodsdetali.attribute_list.filter(item => {
				return item.attribute == attribute
			}).map(item => {
				return {
					img: item.img,
					coupon: item.coupon,
					price: item.price,
					stock: item.stock,
					ID: item.ID,
					market:item.market,
					money: item.money,
					number:item.number,
					duration: item.duration,
				}
			})[0]
		}
	}
	// 规格排列组合
	function arr(arr){
		var list = []
		arr[0]['attr'].forEach(f => {
			list.push({
				attr: f.attr,
				val: [],
				id: []
			})
			data.listckeck.push(-1)
		})
		arr.forEach(f => {
			f.attr.forEach(t => {
				for (var k = 0; k < list.length; k++) {
					if (list[k].attr == t.attr) {
						list[k].val.push(t.val)
						list[k].id.push(t.ID)
					}
				}
			})
		})
		for (var i = 0; i < list.length; i++) {
			list[i].val = [...new Set(list[i].val)]
			var s = []
			for (var k = 0; k < list[i].val.length; k++) {
				s.push(k == 0 ? 1 : 0)
			}
			data.selectlist.push(s)
		}
		list.forEach(item=>{
			item.id=Array.from(new Set(item.id))
		})
		return list
	}
	function open(){ //规格
		popup.value.open('bottom')
	}
	function close(){
		popup.value.close()
	}
	//scroll-view滚动触发
	function scroll(e){
		const scrollTop = e.detail.scrollTop
		calcSize()
		const tabs = data.nav_list.filter(item => item.top <= scrollTop).reverse();
		if (tabs.length > 0) {
			data.nav_id = tabs[0].id;
		}
		data.transparency = e.detail.scrollTop / data.criticalValue
		if (!data.isDropDown && e.detail.scrollTop >= data.criticalValue) {
			data.isDropDown = true
		} else if (data.isDropDown && e.detail.scrollTop < data.criticalValue) {
			data.isDropDown = false
			data.nav_id = null
		}
	}
	//计算高度
	function calcSize(event){
		let h = 0;
		let height = 0
		nextTick(function() {
			let infos = uni.createSelectorQuery().select(".commodity")
			infos.boundingClientRect((datas) => {
				height = datas.height
				data.nav_list.forEach(item => {
					let view = uni.createSelectorQuery().select(`#${item.scrollId}`);
					view.fields({
						size: true
					}, data => {
						if (data != null) {
							item.top = h + height - 50 - uni.getSystemInfoSync().statusBarHeight + 10 * item.id;
							h += data.height
							item.bottom = h;
						}
					}).exec();
				})
			}).exec()
		})


	}
	//点击头部标题
	function changNavId(item){
		if (!data.isDropDown) return
		data.nav_id = item.id
		//scroll-into-view滚动到指定view会有头部高度的误差 用scroll-top来取代
		// data.scrollId = item.scrollId
		data.nav_list.forEach(n => {
			if (n.id == item.id) {
				data.scrollTop = String(item.top)
			}

		})
	}
	//返回
	function getback(){
		if (getCurrentPages().length > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
	//分享
	function share(){
		uni.setClipboardData({
			data:appContext.config.globalProperties.$share+'pages/commodity/bargaining/bargainingdetails?id='+data.id ,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				})
			}
		});
		
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding-bottom: 60px;
	}

	.header {

		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

		.flex {
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			width: calc(100% - 40upx);
			height: 100rpx;

		}

		.nav {
			display: flex;
			align-items: center;

			.navitem {
				margin-left: 30px;
				font-size: 30rpx;
			}

			.navitem:first-child {
				margin-left: 0;
			}
		}

		.round {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			width: 70rpx;
			height: 70rpx;
		}
	}

	.commodity {
		width: 100%;
		// height: 700rpx;

		.swiper {
			width: 100%;
			height: 500rpx;
		}

		image {
			width: 100%;
			height: 500rpx;

		}
		.bargaining{
			height: 130upx;
			background-image: url('https://pili-vod.guanxikeji.com/houdejia/img/1710492638876.png');
			background-repeat:no-repeat;
			background-size: 100% 130upx;
			display: flex;
			justify-content: space-between;
			.pricebox{
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				color: #fff;
				margin: 10upx 20upx;
				font-size: 14px;
				text{
					font-size: 16px;
				}
			}
			.timer{
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #FE2406;
				font-size: 12px	;
				margin-right: 20upx;
			}
		}
		.bargainings{
			height: 130upx;
			background-image: url('http://pubuimg.cqguanjie.cn/icon/16995204533551.png');
			background-repeat:no-repeat;
			background-size: 100% 130upx;
			display: flex;
			justify-content: space-between;
			.pricebox{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				margin-left: 200upx;
				font-size: 14px;
				text{
					font-size: 16px;
				}
				.price2{
					color: #FE2406;
					background-color: #fff;
					border-radius: 20upx;
					padding: 0 10px;
					z-index: 0;
				}
				.price2::after{
					content: '';
					background-color: #FFEF13;
					width: 50%;
					height: 30upx;
					z-index: 9;
				}
			}
			.timer{
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #FE2406;
				font-size: 12px	;
			}
		}
		.commoditybox {
			background-color: #fff;
			padding: 30upx;
			border-radius: 0 0 30upx 30upx;

			.price {
				color: #FA301B;
				display: flex;
				font-size: 46upx;
				font-weight: bold;
				align-items: flex-end;

				.prices {
					text-decoration: line-through;
					color: #999;
					font-size: 24upx;
					font-weight: 400;
					margin-left: 20upx;
				}
			}

			.namebox {
				// padding: 30upx;
				border-radius: 20upx;
				// border: 1upx solid #F5F5F5;
				// margin-top: 30upx;

				.name {
					font-size: 32upx;
					font-weight: bold;
					color: #333;
				}

				.nbb {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20upx;

					.left {

						text:nth-child(1) {
							background: rgba(0, 223, 82, 0.15);
							color: #00C127;
							font-size: 20upx;
							padding: 5upx 20upx;
							border-radius: 5upx;
						}

						text:nth-child(2) {
							color: #666;
							font-size: 24upx;
							margin-left: 10upx;
						}
					}
				}
			}

		}

	}
		.bargainingbox{
			background-color: #fff;
			margin-top: 20upx;
			padding: 30upx;
			.titlebox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title{
					font-size: 16px;
					font-weight: bold;
				}
				.more{
					font-size: 12px;
					color: #999;
				}
			}
			.list{
				display: flex;
				margin-top: 20upx;
				justify-content: space-between;
				.item{
					text-align: center;
					image{
						width: 45px;
						height: 45px;
					}
					font-size: 14px;
				}
			}
		}
	.box {
		margin-top: 20rpx;
		width: calc(100% - 40rpx);
		// margin-left: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		// height: 600px;

		.title {
			// text-align: center;
			font-weight: bold;
			font-size: 32upx;
			color: #333;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 24upx;
				color: #999;
				font-weight: 500;
			}
		}

		.evaluate {
			display: flex;
			margin-top: 30upx;

			.evaluateitem {
				background-color: #F5F5F5;
				padding: 20upx;
				margin-right: 20upx;
				border-radius: 20upx;

				.evaluatetop {
					display: flex;

					.imgs {
						image {
							width: 80upx;
							height: 80upx;
							border-radius: 50%;
						}
					}

					.info {
						margin-left: 20upx;

						.infoname {
							font-size: 28upx;
							font-weight: bold;
						}

						.xing {
							display: flex;

							.xings {
								margin-right: 10upx;

								image {
									width: 30upx;
									height: 30upx;
								}
							}
						}
					}

				}

				.evaluatebottom {
					width: 360upx;
					font-size: 24upx;
					height: 60upx;
				}
			}
		}

		.details {
			margin-top: 20upx;

			::v-deep img {
				max-width: 100% !important;
			}

			::v-deep image {
				max-width: 100% !important;
			}

			::v-deep video {
				max-width: 100% !important;
			}
		}

		.business {
			margin: 30upx 0;
			display: flex;

			.businessimage {
				width: 100upx;
				height: 100upx;
				margin-right: 20upx;

				image {
					width: 100upx;
					height: 100upx;
					border-radius: 20upx;
				}
			}

			.right {
				width: calc(100% - 120upx);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rbox {
					width: calc(100% - 180upx);
					.text1 {
						font-size: 32upx;
						font-weight: bold;
					}

					.text2 {
						font-size: 28upx;
						margin-top: 20upx;
					}
				}

				.btns {
					background-color: $color1;
					padding: 10upx 20upx;
					border-radius: 30upx;
					color: #fff;
					font-size: 24upx;
				}
			}
		}
	}

	.goodsnav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.popup-content {
		background-color: #fff;
		padding: 30upx;
		border-radius: 30upx 30upx 0 0;

		.top {
			display: flex;
			justify-content: flex-end;
		}

		.goodsdetail {
			display: flex;

			.goodsimg {
				width: 200upx;
				height: 200upx;
				margin-right: 20upx;

				image {
					width: 200upx;
					height: 200upx;
					// background-color: aqua;
					border-radius: 20upx;
				}
			}

			.right {
				.price {
					color: red;
					font-size: 36upx;
				}

				.stock {
					color: #999;
					font-size: 26 upx;
					margin: 20upx 0;
				}

				.specifications {
					font-size: 28upx;
				}
			}
		}

		.numbox {
			display: flex;
			justify-content: space-between;
			margin-top: 40upx;
		}

		.specsbox {
			margin-top: 40upx;

			.title {}

			.specslist {
				display: flex;
				flex-wrap: wrap;

				.specsitem {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 10upx;
					border: 1upx solid #999;
					color: #999;
					margin-right: 20upx;
					margin-top: 20upx;
				}

				.active {
					background-color: rgba(255, 0, 0, 0.1);
					border: 1upx solid #FA301B;
					color: #FA301B;
				}
			}
		}

		.buy {
			background-color: #FA301B;
			color: #fff;
			padding: 20upx;
			text-align: center;
			border-radius: 40upx;
			margin-top: 40upx;

		}
	}
</style>